<template>
  <div class="unit" :class="status || isfirst ? 'statu' : ''">
    <!-- 编辑状态 -->
    <template v-if="status || isfirst || !data.position">
      <a-form
        :form="form"
        class="form"
        layout="horizontal"
        labelAlign="left"
        @submit="onSave"
      >
        <a-form-item label="期望职位">
          <a-input
            style="width: 300px"
            size="large"
            placeholder="请输入期望职位"
            v-decorator="[
              'position',
              {
                rules: [{ required: true, message: '请输入期望职位' }],
                initialValue: data.position,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="期望薪资">
          <a-input
            style="width: 110px"
            size="large"
            placeholder="最低"
            v-decorator="[
              'minSalary',
              {
                rules: [{ required: true, message: '请输入最低薪资' }],
                initialValue: data.minSalary,
              },
            ]"
          />
          <div style="width: 32px; display: inline-block; text-align: center">
            -
          </div>
          <a-input
            style="width: 110px"
            size="large"
            placeholder="最高"
            v-decorator="[
              'maxSalary',
              {
                rules: [{ required: true, message: '请输入最高薪资' }],
                initialValue: data.maxSalary,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="期望行业">
          <!-- <a-input
            style="width: 300px;"
            size="large"
            placeholder="请输入期望行业"
            v-decorator="['industry', { 
              rules: [{ required: true, message: '请输入期望行业' }],
              initialValue: data.industry
            }]"
          /> -->
          <a-cascader
            style="width: 300px"
            size="large"
            :options="JSON.parse(JSON.stringify(formatData(listTree))) || []"
            :fieldNames="fieldNames"
            :changeOnSelect="true"
            placeholder="请选择期望行业"
            v-decorator="[
              'industry',
              {
                rules: [{ required: true, message: '请选择期望行业' }],
                initialValue: industry,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="工作城市">
          <a-input
            style="width: 300px"
            size="large"
            placeholder="请输入工作城市"
            v-decorator="[
              'city',
              {
                rules: [{ required: true, message: '请输入工作城市' }],
                initialValue: data.city,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="工作性质">
          <a-radio-group
            class="radio"
            size="large"
            v-decorator="[
              'nature',
              {
                rules: [{ required: true, message: '请选择工作性质' }],
                initialValue: data.nature,
              },
            ]"
          >
            <a-radio-button value="1">全职</a-radio-button>
            <a-radio-button value="2">兼职</a-radio-button>
            <a-radio-button value="3">实习</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <!-- 操作 -->
        <div class="operation">
          <div class="left">
            <a-button @click="status = false" size="large">取消</a-button>
            <a-button html-type="submit" size="large" type="primary"
              >保存</a-button
            >
          </div>
          <div class="right">
            <a v-if="showRemove" href="javascript:;" @click="onRemove()">
              <img src="@/assets/image/icon-remove.png" alt="icon" />
            </a>
          </div>
        </div>
      </a-form>
    </template>
    <!-- 详情状态 -->
    <template v-else>
      <div class="details">
        <h4>{{ data.position }}</h4>
        <ul>
          <li>
            <div class="label">期望薪资</div>
            <div class="content">
              {{ data.minSalary }}-{{ data.maxSalary }}/月
            </div>
          </li>
          <li>
            <div class="label">期望行业</div>
            <div class="content">{{ data.tradeName }}</div>
          </li>
          <li>
            <div class="label">工作城市</div>
            <div class="content">{{ data.city }}</div>
          </li>
          <li>
            <div class="label">工作性质</div>
            <div class="content">
              {{
                data.nature == 1
                  ? "全职"
                  : data.nature == 2
                  ? "兼职"
                  : data.nature == 3
                  ? "实习"
                  : ""
              }}
            </div>
          </li>
        </ul>
      </div>
      <!-- 编辑 -->
      <a
        v-if="showEdit"
        class="edit"
        href="javascript:;"
        @click="status = true"
      >
        <img src="@/assets/image/icon-edit.png" alt="icon" />
        <span>编辑</span>
      </a>
    </template>
  </div>
</template>

<script>
// function tree(list,id){
//   let vArr=[];
//     for(var i=0;i<list.length;i++){
//         if(list[i].children && list[i].children.length){
//             for(var j=0;j<list[i].children.length;j++){
//                 if(list[i].children[j].code == id){
//                     vArr.unshift(list[i].code)
//                     tree(list,list[i].code)
//                     return
//                 }else{
//                     tree(list[i].children,id)
//                 }
//             }
//         }else{
//             continue
//         }
//     }
// }
export default {
  props: {
    // 是否显示编辑按钮
    showEdit: {
      type: Boolean,
      default: true,
    },
    // 是否显示删除按钮
    showRemove: {
      type: Boolean,
      default: true,
    },
    // 当前是否编辑状态
    EditStatus: {
      type: Boolean,
      default: false,
    },
    // 初始数据
    jsonData: {
      type: Object,
      default: () => {},
    },
    // 是否是首次
    isfirst: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      vArr: [],
      form: this.$form.createForm(this, { name: "formData" }),
      data: {},
      status: "",
      listTree: [], // 行业-树形列表
      // 级联选择字段修改
      fieldNames: {
        label: "name",
        value: "code",
        children: "children",
      },
      // 全局
      arrber: [],
    };
  },
  mounted() {
    // buildParentList(this.listTree)
    // console.log(findParent(this.data.trade)); // 0 1 2
  },
  methods: {
    // 格式化数据，递归将空的children置为undefined
    formatData(data) {
      const that = this;
      data.forEach((element) => {
        if (element.children && element.children.length > 0) {
          that.formatData(element.children);
        } else {
          element.children = undefined;
        }
      });
      return data;
    },
    // 获取期望行业
    getlistTree() {
      this.$ajax({
        url: "/news/industry/list/tree",
      }).then((res) => {
        if (res.code == 200) {
          this.listTree = res.data;
        }
      });
    },
    // 保存
    onSave(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(values)
          // let jobIntemJson = {
          // jobCode:values.position,       //"职位名称",
          // industry:values.industry[values.industry.length-1],     //"期望行业",
          // minSalary:values.minSalary,    //"最低薪资",
          // maxSalary:values.maxSalary,    //"最高薪资",
          // workAddress:values.city,       //"工作城市"
          // workType:values.nature         //"工作性质 1.全职 2.兼职 3.实习"
          // }
          // if(this.isfirst){
          //   this.$ajax({
          //     url:"/entrepreneurial/resumeinfo/save",
          //     method:"post",
          //     params:{
          //       jobIntemJson:JSON.stringify(jobIntemJson)
          //     }
          //   })
          // }else{
          //   this.$ajax({
          //     url:"/entrepreneurial/resumeinfo/update",
          //     method:"post",
          //     params:{
          //       resumeNo:"",
          //       jobIntemJson:JSON.stringify(jobIntemJson)
          //     }
          //   })
          // }
          this.$emit("save", values);
          this.status = false;
        }
      });
    },
    // 删除
    onRemove() {
      this.$emit("remove", "触发了删除");
    },
  },
  created() {
    this.status = this.EditStatus;
    this.$set(this, "data", this.jsonData);
    this.getlistTree();
  },
  watch: {
    jsonData(e) {
      this.$set(this, "data", e);
    },
    vArr(e) {
      return e;
      // console.log(e, "66666666666666");
    },
  },
  computed:{
    industry(){
      if(this.data.trade){
        let arr = this.data.trade.split(',');
        return arr.splice(0,arr.length-1).reverse();
      }
      
    }
  }
};
</script>

<style lang="less" scoped>
.unit {
  padding: 32px;
  border: 1px solid #eee;
  position: relative;
  transition: all 0.3s;
  &.statu {
    background-color: #f8f8f8;
    border-color: #f8f8f8 !important;
  }
  &:hover {
    border-color: @theme;
    .edit {
      opacity: 1;
    }
  }
  // 表单
  .form {
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 126px;
        label {
          font-size: 16px;
        }
      }
      .radio {
        label {
          width: 110px;
          text-align: center;
          margin-right: 32px;
          border-radius: 4px;
        }
      }
    }
    .tabs {
      display: flex;
      flex-direction: row;
      li {
        width: 110px;
        height: 40px;
        border: 1px solid #d9d9d9;
        margin-right: 32px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        border-radius: 4px;
        transition: all 0.3s;
        cursor: pointer;
        &:hover {
          border-color: @theme;
        }
        &.click {
          color: @theme;
          border-color: @theme;
        }
      }
    }
  }
  // 操作
  .operation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    button {
      margin-right: 16px;
      width: 100px;
    }
    img {
      height: 18px;
    }
  }
  // 详情
  .details {
    h4 {
      font-size: 18px;
      line-height: 25px;
      padding-bottom: 8px;
    }
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        width: 50%;
        display: flex;
        flex-direction: row;
        margin-top: 16px;
        .label {
          color: #666;
          &::after {
            content: "：";
          }
        }
        .content {
          color: #333;
        }
      }
    }
  }
  // 编辑
  .edit {
    position: absolute;
    right: 16px;
    top: 16px;
    opacity: 0;
    transition: all 0.3s;
    img {
      height: 18px;
    }
    span {
      margin-left: 8px;
      color: #666;
      font-size: 13px;
    }
  }
}
</style>